import React from 'react';
import XDate from 'xdate';
import './flowBase.scss';
import { ShopApi } from 'js/api/shop';

const FlowBase = React.createClass({
    getInitialState() {
        return {
            name: null,
            temperature: null,
            time: new Date()
        }
    },
    componentDidMount() {
        let query = {
            ShopId: this.props.shopId,
            Date: new XDate().toString('yyyy-MM-dd')
        }
        ShopApi.getShopBaseData(query, (data) => {
            this.setState({
                name: data[0].SHOPNAME,
                weather: data[0].WEATHERCODE,
                temperature: data[0].TEMPERATURE,
                time: new Date()
            })
        })
    },
    render() {
        let weatherNode, temperatureNode;
        if (this.state.weather) {
            weatherNode = <div className={"icon icon-weather-" + (this.state.weather)}>&nbsp;</div>
        }
        if (this.state.temperature) {
            temperatureNode = <div className="temperature">{this.state.temperature}℃ </div>
        }
        return (
            <div id="flowBase" className="flex">
                <div className="content flex-vcenter">
                    <div className="name">
                        {this.state.name}
                    </div>
                    {weatherNode}
                    {temperatureNode}
                    <div className="datetime flex-g-1">
                        {new XDate(this.state.time).toString("yyyy/MM/dd")}
                    </div>
                </div>
            </div>
        );
    }
})

module.exports = FlowBase;